<template>
  <boxContainer :height="271" :loading="loading">
    <template #header>
      <carousel v-if="scrollData?.length" :data="scrollData" />
      <div class="left_boottom set-bg">
        <div class="left_boottom_item">
          <div class="flex w-full">
            <div class="w-65">时间</div>
            <div class="w-65">职工姓名</div>
            <div class="flex-1">用工企业</div>
            <div class="w-100">状态</div>
          </div>
        </div>
      </div>
    </template>
    <template #default>
      <Vue3SeamlessScroll :list="state.visibleList" :limitScrollNum="6" :singleHeight="43" :singleWaitTime="2000"
        class="scroll" @count="getCount">
        <template v-if="state.visibleList?.length">
          <div class="left_boottom">
            <div class="left_boottom_item" :class="{ 'strip': i % 2 === 0 }" v-for="(item, i) in state.visibleList"
              :key="i">
              <div class="flex w-full">
                <div class="w-65">{{ item.time }}</div>
                <div class="w-65">{{ filterName(item.userName) }}</div>
                <div class="flex-1 single-line">{{ filterCompanyName(item.serverCompanyName) }}</div>
                <div class="w-100 fc-green" :class="{ 'fc-blue': (item.type === 2 && item.content === '保障中') }">{{
                  item.content
                }}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="left_boottom flex flex-jc-c flex-ai-c flex-column set-mg-t">
            <img src="../../../assets/img/bi/default-img.png" alt="">
            <div class="fs-12 fc-default mg-t-5">暂无数据</div>
          </div>
        </template>
      </Vue3SeamlessScroll>
    </template>
  </boxContainer>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, reactive } from "vue";
import boxContainer from '@/components/box-container/index.vue';
import carousel from './carousel.vue';
import { chunk } from 'lodash';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { filterName, filterCompanyName } from '@/utils/util.ts';

import { scrollIngMsg, workerInfos } from '@/api/bi.ts';

let scrollData = ref([]) as any

const getScrollData = () => {
  scrollIngMsg({}, {
    loading: true
  }).then((res) => {
    scrollData.value = res || []
    console.log(3444, scrollData.value);
  })
}

let loading = ref(false)

const state = reactive<any>({
  list: [],
  pageList: [],
  visibleList: [],
  pageNum: 0,
  pageSize: 50,
  maxPageNum: 0,
  scroll: true,
});

const getData = () => {
  loading.value = true
  getScrollData()
  workerInfos({}, {
    loading: true
  }).then((res: any) => {
    loading.value = false
    if (res?.length) {
      state.list = res
      state.maxPageNum = Math.ceil(state.list.length / state.pageSize)
      state.pageList = chunk(state.list, state.pageSize)
      state.visibleList = state.pageList[state.pageNum]
    }
  })
};

const getCount = (count: any) => {
  state.visibleList = state.pageList[count % state.maxPageNum]
  if (state.pageList?.length > 1 && state.visibleList?.length < state.pageSize) {
    const temp = state.pageList[0].slice(0, state.pageSize - state.visibleList?.length)
    state.visibleList = [...state.visibleList, ...temp]
  }
}

defineExpose({
  getData
})
onMounted(() => {
  getData()
});
</script>

<style scoped lang="stylus">
.left_boottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
   color: #fff;
}

.doudong {
  overflow: hidden;
  backface-visibility: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.left_boottom {
  width: 100%;
  height: 100%;
  color: #fff;
  .left_boottom_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    font-size: 14px;
    // margin: 10px 0;
    color: #fff;
  }
}
.set-pd {
  padding: 0 8px;
}
.strip {
    background-color: rgba(255, 255, 255, 0.03)
}
.setbg {
  background: #071B43;
}
.fc-green {
  color #19EBFF
}
.fc-blue{
  color #387EFF
}
.w-65 {
  width 65px
}
.w-100 {
  width: 100px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap  
}
.single-line {
  width: 200px
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap  
}
.fc-default {
  color rgba(255, 255, 255, 0.2)
}
.set-mg-t {
  margin-top 70px
}
</style>
